import React from "react";
import { FullScreenContainer, BorderBox1, BorderBox2, BorderBox3, BorderBox4, BorderBox5, BorderBox6, BorderBox7, BorderBox8, BorderBox9,
  BorderBox10, BorderBox11 } from "@jiaminghi/data-view-react";
export default () => {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "center", alignItems: "center", height: "100%", padding: 30, backgroundColor: "#282c34", boxSizing: "border-box" }}>
      {/* <FullScreenContainer>

      </FullScreenContainer> */}

      <div style={{ flex: "0 0 300px", height: "30%" }}>
        <BorderBox1 color={["red", "green"]} >
          <div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "100%" }}>
            BorderBox1
          </div>
        </BorderBox1>
      </div>
      <div style={{ flex: "0 0 300px", height: "30%" }}>
        <BorderBox2 color={["red", "green"]} >
          <div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "100%" }}>
            BorderBox2
          </div>
        </BorderBox2>
      </div>

      <div style={{ flex: "0 0 300px", height: "30%" }}>
        <BorderBox3 color={["red", "green"]} >
          <div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "100%" }}>
            BorderBox3
          </div>
        </BorderBox3>
      </div>
      <div style={{ flex: "0 0 300px", height: "30%" }}>
        <BorderBox4 color={["red", "green"]} >
          <div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "100%" }}>
            BorderBox4
          </div>
        </BorderBox4>
      </div>
      <div style={{ flex: "0 0 300px", height: "30%" }}>
        <BorderBox5 color={["red", "green"]} >
          <div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "100%" }}>
            BorderBox5
          </div>
        </BorderBox5>
      </div>
      <div style={{ flex: "0 0 300px", height: "30%" }}>
        <BorderBox6 color={["red", "green"]} >
          <div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "100%" }}>
            BorderBox6
          </div>
        </BorderBox6>
      </div>
      <div style={{ flex: "0 0 300px", height: "30%" }}>
        <BorderBox7 color={["green", "blue"]} title="borderBox11" >
          <div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "100%" }}>
            BorderBox7
          </div>
        </BorderBox7>

      </div>
      <div style={{ flex: "0 0 300px", height: "30%" }}>
        <BorderBox8 color={["green", "blue"]} title="borderBox11" >
          <div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "100%" }}>
            BorderBox7
          </div>
        </BorderBox8>
      </div>
      <div style={{ flex: "1 0 300px", height: "30%" }}>
        <BorderBox11 color={["green", "blue"]} title="borderBox11" backgroundColor="white" >
          <div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "100%" }}>
            BorderBox11
          </div>
        </BorderBox11>
      </div>
    </div>);
};
